{extend name="../../admin/view/main"}

{block name='content'}
<form action="{:request()->url()}" autocomplete="off" class="layui-form layui-card" data-auto="true" method="post">
    <div class="layui-card-body padding-40">

        <label class="layui-form-item relative block">
            <span class="color-green font-w7">题目</span>
            <span class="color-desc margin-left-5">Title</span>
            <input class="layui-input" name="title" placeholder="请输入题目" required value='{$vo.title|default=""}'>
        </label>

        <label class="layui-form-item relative block" style="margin-top: 30px">
            <span class="color-green font-w7">选项</span>
            <span class="color-desc margin-left-5">Math Text</span>
            <div class="input-container">
                {if isset($vo.answers)}
                {foreach $vo.answers ?? [] as $index => $answer}
                <div class="input-item">
                    <input class="layui-input" name="answers[]" placeholder="选项" required value="{$answer}">
                    <input class="layui-checkbox" type="checkbox" name="is_answers[]" {if in_array($index, $vo.is_answers)}checked{/if} value="{$index}">
                    <button type="button" class="delete-input-btn layui-btn layui-btn-primary">-</button>
                </div>
                {/foreach}
                {else}
                <div class="input-item">
                    <input class="layui-input" name="answers[]" placeholder="选项" required value="">
                    <input class="layui-checkbox check-position" type="checkbox" name="is_answers[]" value="0">
                    <button type="button" class="delete-input-btn layui-btn layui-btn-primary">-</button>
                </div>
                {/if}
                <div class="answer">答案</div>
                <div type="button" class="add-input-btn layui-btn layui-btn-primary">+</div>
            </div>
        </label>

        <div class="layui-clear">
            <fieldset>
                <legend><span class="layui-badge think-bg-violet">状态</span></legend>
                <div class="layui-form-item">
                    {foreach [1 => '启用',0 => '禁用'] as $k=>$v}
                        {if (isset($vo.state) and $vo.state eq $k) or (empty($vo.state) and $k eq 1)}
                            <input checked name="state" title="{$v}" type="radio" value="{$k}">
                        {else}
                            <input name="state" title="{$v}" type="radio" value="{$k}">
                        {/if}
                    {/foreach}
                </div>
            </fieldset>
        </div>

        <div class="hr-line-dashed"></div>
        {notempty name='vo.id'}<input name='id' type='hidden' value='{$vo.id}'>{/notempty}

        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存数据</button>
            <button class="layui-btn layui-btn-danger" data-confirm="确定要取消编辑吗？" data-close type='button'>取消编辑</button>
        </div>
    </div>

</form>


<script>

    window.form.render();

    $(function() {
        var inputContainer = $('.input-container');

        // 绑定删除按钮的点击事件处理程序
        inputContainer.on('click', '.delete-input-btn', function() {
            // 删除对应的输入框
            $(this).parent('.input-item').remove();

            // 检查输入框数量和状态，并更新删除按钮的状态
            updateDeleteButtonStatus();
        });

        // 绑定添加按钮的点击事件处理程序
        $('.add-input-btn').click(function() {
            // 创建一个新的输入框
            var inputItem = $('<div class="input-item"><input class="layui-input" name="answers[]" placeholder="选项" required value=""> <input class="layui-checkbox" type="checkbox" name="is_answers[]" value=""><button type="button" class="delete-input-btn layui-btn layui-btn-primary">-</button></div>');

            // 将新的输入框添加到输入框容器中
            inputContainer.append(inputItem);

            // 检查输入框数量和状态，并更新删除按钮的状态
            updateDeleteButtonStatus();
            window.form.render();
        });

        // 在页面加载时检查删除按钮的状态
        updateDeleteButtonStatus();

        function updateDeleteButtonStatus() {
            var inputItems = inputContainer.find('.input-item');
            var deleteButtons = inputItems.find('.delete-input-btn');

            if (inputItems.length === 1 && inputItems.find('input').val() === '') {
                // 如果只有一个输入框且为空，则禁用删除按钮
                deleteButtons.prop('disabled', true);
            } else {
                // 否则启用删除按钮
                deleteButtons.prop('disabled', false);
            }
        }
    });
</script>

<style>
    .add-input-btn {
        position: absolute;
        top: -38px;
        right: 0;
        width: 40px; /* 调整按钮宽度 */
        height: 36px; /* 调整按钮高度 */
        font-size: 14px; /* 调整按钮字号 */
        line-height: 36px; /* 调整按钮行高 */
        padding: 0; /* 去除按钮内边距 */
        z-index: 9999;

    }
    .answer{
        position: absolute;
        top: -30px;
        right: 54px;
        font-size: 12px;
        font-weight: 600;
    }
    .input-item {
        position: relative;
    }

    .delete-input-btn {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9999;
    }

    .input-container {
        position: relative;
    }
    .input-item .layui-unselect{
        position: absolute;
        width: 42px;
        right: 43px;
        z-index: 1;
        top: 0;
        margin: 0;
        height: 100%;
    }
    .layui-form-checkbox i{
        border: 1px solid #d2d2d2;
        height: 100%;
        width: 42px;
        box-sizing: border-box;
    }
    .
</style>
{/block}